<!-- 公共组件 头部筛选区域组件 -->
<template>
    <div class="filter-main">
        <div class="filter-box">
            <!-- 筛选框区域 -->
            <div class="filterBox-flex">
                <!-- 操作框区域 -->

                <!-- 按钮 -->
                <div v-if="isBtn" class="filterBox-btn">
                    <div class="filterBox-tool">
                        <slot name="tool" />
                    </div>
                    <el-button 
                        v-if="false" 
                        type="primary"
                    >
                        <i class="el-icon-plus" />{{ btnName }}
                    </el-button>
                </div>
                <div class="filterBoxInput">
                    <div
                        v-for="(item, index) in itemlists"
                        :key="index"
                        :prop="item.prop"
                        class="filterBox-input"
                    >
                        <!-- input -->
                        <el-input
                            v-if="item.type === 'input'"
                            v-model="query[item.prop]"
                            class="input"
                            v-bind="item.attrs"
                            :placeholder="item.placeholder"
                            clearable
                            @keyup.enter.native="searchBtn"
                        >
                            <i
                                slot="suffix"
                                class="el-input__icon el-icon-search"
                                @click="searchBtn"
                            />
                        </el-input>

                        <!-- select -->
                        <el-select
                            v-if="item.type === 'select'"
                            v-model="query[item.prop]"
                            class="select-input"
                            v-bind="item.attrs"
                            :placeholder="item.placeholder"
                            clearable
                            @change="autoCommit ? searchBtn() : ''"
                        >
                            <el-option
                                v-for="option in enumData[item.enum]"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                            />
                        </el-select>
                        
                        <!-- date -->
                        <div v-if="item.type === 'date'" class="block date">
                            <el-date-picker
                                v-model="query[item.prop]"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="timestamp"
                            />
                        </div>

                        <!-- slot -->
                        <div v-if="item.type === 'slot'">
                            <slot :name="item.name" />
                        </div>
                    </div>
                    <slot class="select-input" name="selectInput" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ComForm',
    props: {
        btnName: {
            type: String,
            default: '新建按钮'
        },
        // 是否启用查找与重置 默认启用
        isBtn: {
            type: Boolean,
            default: true
        },
        itemlists: {
            type: Array,
            default: () => []
        },
        query: {
            type: Object,
            default: () => {}
        },
        // 枚举数据
        enumData: {
            type: Object,
            default: () => {}
        },
        // item宽度
        labelWidth: {
            type: String,
            default: '84px'
        },
        // 自动提交
        autoCommit: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {}
    },
    watch: {},
    methods: {
        // 查找
        searchBtn() {
            const data = Object.assign({}, this.query)
            this.$emit('searchBtn', data)
        }
    }
}
</script>
<style lang="scss" scoped>
.filter-main ::v-deep {
    padding: 25px 30px;
    background-color: #ffffff;
    margin-bottom: 1px;
    .filterBox-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .filterBox-btn {
            .el-button {
                min-width: 87px;
                height: 32px;
                padding: 0;
                font-size: 14px;
            }
        }
        .filterBoxInput {
            display: flex;
            .filterBox-input,
            .selectInput {
                margin-left: 20px;
            }
            .el-input__inner {
                width: 240px;
                height: 32px;
                font-size: 12px;
                line-height: 30px;
                // margin-left: 20px;
            }
            .selectInput,
            .select-input {
                .el-input__inner {
                    width: 180px;
                }
                .el-input__prefix {
                    line-height: 32px;
                    font-size: 12px;
                    left: 15px;
                    color: #343A3D;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
    .el-icon-plus {
        margin-right: 5px;
    }
    .el-icon-search {
        color: #337ab7;
        font-weight: 600;
    }
    .el-input--medium .el-input__icon {
        line-height: 32px;
    }
    .el-input__suffix {
        cursor: pointer;
    }
    .el-input--prefix .el-input__inner {
        padding-left: 15px;
    }
    .selectInput.el-select--medium .el-input__prefix {
        line-height: 32px;
        color: #343A3D;
    }
}
</style>
